{% extends "home.html" %}

{% block title %} Bayanihan: Reports Detail {% endblock %}

{% block nav-reports %} class="nav-active" {% endblock %} 
{% block nav-home %}{% endblock %} 

{% block map_operations %}
	<script type="text/javascript">
		$(document).ready( function(){
			init(); 
            data = jQuery.parseJSON('{{feature|safe}}');
            addLayer('dummy');
            get_reports(data, 'dummy');
            

            lon = data.features[0].geometry.coordinates[0];
            lat = data.features[0].geometry.coordinates[1];
            setMapCenter(lon, lat);
		})
	</script>
{% endblock %}

{% block css %} 
	<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/detail.css" />
{% endblock %}


{% block content %}
	<div id="info">
        {% for x in report %}
            <div>
                <h2>{{x.value.properties.title}}</h2>
            </div>
            <div><h4>Date:</h4> {{x.value.properties.timestamp_submitted}}</div>
            <!-- <div>Location: {{x.value.properties.report.location}}</div> -->
            <div>
                <h4>Description:</h4>
                {{x.value.properties.description}}
            </div>
            <div>
                <h4>{{x.value.properties.index_name}}:</h4>
                {{x.value.properties.index_level_name}}
            </div>
		{% endfor %}
	</div>
	
	<div id="map"></div>
{% endblock %}